Qui suis-je, que dis-je
Directeur de l'association Scenari et freelance Scenari (spécialité skinnage).
Nombreux skins réalisés, dont ceux des Rencontres 2009, 2013, 2014, 2020, 2021, 2022.
Expérience personnelle empirique.
CSS : sélecteurs utiles
Pseudo-éléments
Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle.
Les plus utilisé :
::before
::after
Exemple
.default #tools .anc_yes .lbl::before {
display: block;
background: white;
width: 20px;
height: 20px;
content: ' ';
position: absolute;
transform: rotate(45deg);
bottom: -13px;
left: calc(50% - 10px);
box-shadow: 0 0 10px #262626;
}
sélecteurs spécifiques
Espace : tous les descendants
> : seulement les éléments fils
+ : élément frère suivant
~ : tous les éléments frère suivants
Liste complète : https://www.w3schools.com/cssref/css_selectors.asp
CSS : fonctions utiles
rgba() : définir une couleur avec transparence.
exemple : background-color:rgba(16,170,158, 0.5);
calc() : définir une dimension à partir d'un calcul pouvant combiner différentes unités
exemple : margin-left :calc(50% - 10px) ;
var() : définir une variable qu'on peut réutiliser ensuite
exemple :
:root{
--couleur2:#eff3f7;
}
background: var(--couleur2);
counter() : définir un compteur automatique
exemple :
body{counter-reset: section;}
h2::before{
counter-increment: section;
content: "Section " counter(section) ": ";
}
Liste complète : https://www.w3schools.com/cssref/css_functions.asp
CSS styler les barres de défilement
Exemple
/* largeur */
::-webkit-scrollbar {
width: 20px;
}
/* fond */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* barre */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
CSS responsive design
@media (max-width: 1300px) {
....
}
Utiliser des icônes comme une police de caractères
https://fontello.com/ propose une collection d’icônes à sélectionner puis à utiliser comme caractère d'une police de caractères.
Mais on peut aussi y utiliser ses propres icônes :
téléverser les icônes svg
les sélectionner (avec ou sans autres icônes de la collection de fontello)
télécharger le zip
intégrer la police comme n'importe quelle police dans une css
utiliser content:'...' pour afficher l'icône.
Avantages :
on manipule la taille avec font-size
on peut appliquer un text-shadow
on peut changer la couleur comme on veut
Modification du contenu html
Librairie scPaLib.findNode(s) pour rechercher des éléments html (il existe d'autre librairies JS)
findNode pour trouver le premier élément
findNodes pour faire un tableau de tous les éléments trouvés
appendChild, insertBefore, ...
Création d'éléments avec document.createElement
Exemple
scPaLib.findNode("ide:main").appendChild(scPaLib.findNode("ide:menu"));
On va chercher l'élément d'id « main », et comme dernier élément fils dedans, on va mettre l'élément d'id « menu ».
Exemple
var vBoutonTheme=document.createElement("a");
On crée un nouvel élément html « a »
vBoutonTheme.setAttribute('class', 'boutonTheme');
On lui donne une classe « boutonTheme »
vBoutonTheme.innerHTML="Basculer en thème clair/sombre";
On lui donne un contenu textuel
Switch de style (clair/sombre, dys/pas dys, ...)
Ajout d'une classe sur le body & ajustement de la css en fonction
Exemple
Javascript :
vBoutonMode.addEventListener("click", document.body.classList.toggle("mode-dys");)
On écoute le clic sur le bouton de changement de mode, et sur chaque clic on met ou enlève la classe mode-dys.
CSS :
body.mode-dys *{ // sur tous les éléments descendants du body ayant la classe .mode-dys ...
font-family:"dys" !important; // ... on force l'usage de la police dys
}
Persistance d'une page à une autre
localStorage.setItem("theme", theme); Pour enregistrer une donnée.
localStorage.getItem("theme") Pour récupérer une donnée.
Exemple : persistance du style dys (enregistrement)
if (document.body.classList.contains("mode-dys")) { // si le body a la classe mode-dys ...
mode = "dys"; // ...alors la variable mode devient dys
}
localStorage.setItem("mode", mode); // on enregistre le mode dans le localstorage
Exemple : persistance du style dys (récupération)
if (localStorage.getItem("mode") == "dys") { // si le mode du localstorage est dys ...
document.body.classList.add("mode-dys"); // ... alors on met la classe mode-dys au body
}
Exemple : persistance du style sombre
if (localStorage.getItem("theme") == "dark") { // si le thème du localstorage est dark ...
document.body.classList.add("dark-theme"); // ... alors on met la classe dark-theme au body
} else if (localStorage.getItem("theme")==null){ // sinon ...
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); // ... on interroge le thème du navigateur
if (prefersDarkScheme.matches) { // si c'est dark ...
document.body.classList.add("dark-theme"); // ... alors on met la classe dark-theme au body
} else { // sinon ...
document.body.classList.remove("dark-theme"); // ... on l'enlève
}
}